<template>
    <div id="addFunds" v-loading="pageLoading">
        <p class="page-title">在线充值</p>
        <div class="container padder">
            <div class="form">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="150px"
                         class="demo-ruleForm el-form">
                    <el-form-item label="可用余额：" prop="">
                        <span class=" text-danger text-2x ">{{yue / 100}}</span>
                        <sub class="m-l-xs text-sm text-muted">元</sub>
                    </el-form-item>
                    <el-form-item label="充值金额：" prop="jine">
                        <el-input type="text" v-model="ruleForm.jine" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="请选择支付方式：" class="m-t-lg">

                        <div class="payType">
                            <el-radio v-model="ruleForm.pay_fangshi" :label="1">
                                <img src="../../assets/imgs/alipay.png" alt="">
                            </el-radio>
                            <el-radio v-model="ruleForm.pay_fangshi" :label="3">
                                <img src="../../assets/imgs/wepay.svg" alt="">
                            </el-radio>

                        </div>
                    </el-form-item>
                </el-form>
                <div class="bottom text-center b-t padder-v">
                    <el-button type="primary" @click="pay" :loading="loading">立即支付</el-button>
                </div>
            </div>
            <el-dialog
                    title="请扫描下方二维码进行支付"
                    :visible.sync="qrCodeDialog"
                    width="30%"
                    :before-close="ccTimer"
            >
                <div class="padder">
                    <div class="text-center">
                        <img :src="payInfo.erweima" class="img-full" alt="">
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
              <!--  <el-button @click="qrCodeDialog = false">取 消</el-button>
            <el-button type="primary" @click="qrCodeDialog = false">确 定</el-button>-->
  </span>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'addFunds',
        components: {},
        data() {
            return {
                pageLoading: true,
                qrCodeDialog: false,
                loading: false,
                payInfo: {
                    erweima: '',
                    dingdanhao: ''
                },
                yue: 0,
                timer: null,
                ruleForm: {
                    jine: '',
                    pay_fangshi: 1
                },
                rules: {
                    jine: [
                        {required: true, message: '请输入充值金额'},
                        {type: 'number', message: '请输入数字', transform: value => +value},
                        {type: 'number', min: 1, max: 1000, message: '充值金额1-1000', transform: value => +value},
                    ]
                }
            }
        },
        computed: {},
        methods: {
            //发起支付
            pay() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$axios.post(`/api/Chongzhi/pay`, this.ruleForm)
                            .then(res => {
                                if (res.code === `200`) {
                                    this.qrCodeDialog = true;
                                    this.payInfo = res.data;
                                    this.poll();
                                }
                            }).finally(() => {
                            this.loading = false;
                        })
                    }
                })
            },
            /**
             * 获取充值状态
             */
            getPayStatus() {
                this.$axios.post(`/api/Chongzhi/get_dingdan_zhuangtai`, {dingdanhao: this.payInfo.dingdanhao})
                    .then(res => {
                        if (res.code === `200`) {
                            if (res.msg === 1) {
                                this.$message.success('充值成功');
                                this.qrCodeDialog = false;
                                this.ccTimer();
                                this.getYe();
                                setTimeout(() => {
                                    location.reload();
                                }, 500)


                            }
                        }
                    })
            },
            //轮询
            poll() {
                this.timer = setInterval(() => {
                    this.getPayStatus();
                }, 2000)

            },
            //查询余额
            getYe() {
                this.$axios.post(`/api/user/yue_chaxun`)
                    .then(res => {
                        this.pageLoading = false
                        if (res.code === `200`) {
                            this.yue = res.data.yue
                        }
                    })
            },
            //清除定时器
            ccTimer(done) {
                clearInterval(this.timer);
                done()
            }
        },
        created() {
            this.getYe()
        },
        beforeRouteLeave(to, from, next) {
            clearInterval(this.timer);
            next()
        }
    }
</script>

<style lang="less" scoped>
    .form {
        width: 500px;

        .payType {
            .el-radio {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
            }

            img {
                margin-right: 20px;
                cursor: pointer;
            }
        }
    }
</style>
